<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <toubu v-on:Search="SearchBtn($event)" @Clear="list" />
        <el-alert type="info" show-icon>
          <template slot="title"> 一共{{ page.total }}条数据 </template>
        </el-alert>
        <!-- 基础题库列表 -->
        <el-table :data="items" style="width: 100%">
          <el-table-column fixed prop="number" label="试题编号">
          </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template slot-scope="{ row }">
              {{ row.questionType | questionsType }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template slot-scope="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="{ row }">
              {{ row.difficulty | degree }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                plain
                title="预览"
                @click="dialogVisible(scope.row.id)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                circle
                plain
                title="修改"
                @click="$router.push(`/questions/new?id=${scope.row.id}`)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                title="删除"
                @click="removeUser(scope.row.id)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                circle
                plain
                title="加入精选"
                @click="selected(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页按钮 -->
        <el-pagination
          background
          style="margin-top: 20px; text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="2"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-card>
      <!-- 预览弹出层 -->
      <questionsPreview
        :showDialog.sync="showDialog"
        ref="eject"
      ></questionsPreview>
      <!-- /预览弹出层 -->
    </div>
  </div>
</template>

<script>
import toubu from '../components/toubu.vue'
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    toubu,
    questionsPreview
  },
  data () {
    return {
      items: [], // 列表
      form: {
        subjectID: ''
      },
      page: {
        page: 1, // 当前页码
        total: 0, // 总数
        pagesize: 5 // 每页多少条
      },
      showDialog: false,
      id: null
    }
  },
  created () {
    this.list()
  },
  methods: {
    async SearchBtn (data) {
      await this.list({ ...data, ...this.page })
    },
    // 获取列表
    async list (obj) {
      try {
        const { data } = await list({ ...obj, ...this.page })
        this.items = data.items
        this.page.total = data.counts
      } catch (error) {
        this.$message.info('获取信息失败')
      }
    },
    // 控制每页多少条
    handleSizeChange (val) {
      this.page.pagesize = val
      this.list()
    },
    // 控制当前页
    handleCurrentChange (val) {
      this.page.page = val
      this.list()
    },
    // 删除按钮
    removeUser (user) {
      this.$confirm('此操作将永久删除该题目 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.items.splice(user, 1)
              this.list()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 加入精选按钮
    selected (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({ id: id, choiceState: 1 })
            .then(response => {
              this.$message('加入精选成功')
              this.list()
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 预览弹出框
    async dialogVisible (id) {
      this.showDialog = true
      this.$refs.eject.detail(id)
      this.id = id
    }
  }
}

</script>

<style lang="scss" scoped>
</style>
